<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:p="http://primefaces.org/ui"
	template="/templates/masterLayout.xhtml">

	<ui:define name="head-extra">
		<!-- custom css -->
	</ui:define>

	<ui:define name="content">
		<!-- 
		<h:form id="recipeForm">
			<p:dataTable var="currentRecipe" value="#{recipeBean.recipeModel}"
				paginator="true" rows="10"
				paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
				rowsPerPageTemplate="5,10,15" selectionMode="single"
				selection="#{recipeBean.selectedRecipe}" id="recipeTable" lazy="true">
				<p:column headerText="Name">
					<h:outputText value="#{currentRecipe.recipeName}" />
				</p:column>
			</p:dataTable>
			
			<p:commandButton action="#{recipeController.addRecipe('testNewEL')}" value="ADD" update=":recipeForm:recipeTable"></p:commandButton>
		</h:form>
 -->
		<h:form id="beerForm">
			<p:dataTable var="currentBeer" value="#{beerBean.beerModel}"
				paginator="true" rows="10"
				paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
				rowsPerPageTemplate="5,10,15" selectionMode="single"
				selection="#{beerBean.selectedBeer}" id="beerTable"
				lazy="true">
				<!--  
				<p:ajax event="rowSelect" listener="#{dtLazyView.onRowSelect}"
					update=":form:carDetail" oncomplete="PF('carDialog').show()" />
					-->
				<p:column headerText="ID" sortBy="#{currentBeer.id}"
					filterBy="#{currentBeer.id}">
<<<<<<< HEAD
					<h:outputText value="#{currentRecipe.id}" />
=======
					<h:outputText value="#{currentBeer.id}" />
>>>>>>> origin/master
				</p:column>
				<p:column headerText="Name" sortBy="#{currentBeer.beerName}"
					filterBy="#{currentBeer.beerName}">
					<h:outputText value="#{currentBeer.beerName}" />
				</p:column>
				<p:column headerText="Cost" sortBy="#{currentBeer.cost}"
					filterBy="#{currentBeer.cost}">
					<h:outputText value="#{currentBeer.cost}" />
				</p:column>
				<p:column headerText="Beer Pairing">
					<p:commandButton value="CREATE NEW BEER"  update=""></p:commandButton>
				</p:column>
				<p:column headerText="Details">
					<p:splitButton value="EDIT" 
						icon="ui-icon-disk">
						<p:menuitem value="REMOVE" action="#{beerController.removeBeer(currentBeer.id)}"
							update=":beerForm:beerTable" icon="ui-icon-close" >
							</p:menuitem>
					</p:splitButton>
				</p:column>
			</p:dataTable>
		</h:form>
		<h:form id="newBeerForm">
			<h:panelGrid columns="4" cellpadding="5">
				<h:outputLabel for="name" value="New Beer Name"
					style="font-weight:bold" />
				<p:inputText id="name" value="#{beerController.newBeerName}" />
				<p:commandButton value="Add"
					action="#{beerController.addBeer()}"
					update=":beerForm:beerTable" icon="ui-icon-check"></p:commandButton>
			</h:panelGrid>
		</h:form>

	</ui:define>
</ui:composition>